<template>
  <div class="card2">
    <div class="list-item" style="padding-top: 0.5rem">
      <div class="icon" style="margin: 0 auto">
        <img class="w-8 h-8" :src="img" alt="Profile Image" />
      </div>
    </div>
    <div class="text" :class="colorClass" style="font-size: 12px">{{ d.value.daoli }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';

defineProps({
  d: Object,

  img: String,

  colorClass: {
    type: String,
    default: 'text-white', // Set default value for paddingClass
  },
});
</script>
<style scoped lang="less">
.list-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #fff;
}

.icon {
  margin-right: 0.5rem;
}

.text {
  font-size: 1rem;
  text-align: center;
}
</style>
